<section>
  <h5>Change Align Origin</h5>
  <div
    class="btn-group g-dropdown"
    dDropDown
    appendToBody
    [alignOrigin]="originRef"
    [appendToBodyDirections]="['leftDown', 'leftUp']"
    [appendToBodyScrollStrategy]="'close'"
    (toggleEvent)="onToggle($event)"
  >
    <div class="align-origin" #origin>
      Align Area
      <a dDropDownToggle class="devui-dropdown-default devui-dropdown-origin">
        Dropdown
        <span class="icon-chevron-down-2"></span>
      </a>
    </div>

    <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
      <li class="disabled" role="menuitem">
        <a dDropDownMenuItem class="disabled">Disabled Option</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>New </a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Delete </a>
      </li>
    </ul>
  </div>
</section>
<section>
  <h5>Align Center</h5>
  <div
    class="btn-group g-dropdown"
    dDropDown
    appendToBody
    [appendToBodyDirections]="['centerDown', 'centerUp']"
    (toggleEvent)="onToggle($event)"
  >
    <d-button icon="icon-add" bsStyle="text" title="Add" dDropDownToggle></d-button>
    <ul dDropDownMenu class="devui-dropdown-menu" role="menu">
      <li class="disabled" role="menuitem">
        <a dDropDownMenuItem class="disabled">Disabled Options</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>New </a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Delete</a>
      </li>
    </ul>
  </div>
</section>
